<script>
import { Back  } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';

export default{

    data() {
        return {
          list: [],
            fits:[
  'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0512882c-b98a-44e1-b735-f209f5be37d5%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681612565&t=e7565b3d87c1e2b90815942c42877f98',
  'https://img.pcauto.com.cn/images/ttauto/2022/09/07/7140157141029208590/26832068f5c24c589fbff3e7cf8ec9d7.png',
  'https://img.pcauto.com.cn/images/ttauto/2022/02/24/7067112428869321246/4da301aa132b4567a4ecf0c477dfed0c.png',
  'https://img2.autotimes.com.cn/news/2021/06/0625_124030771955.jpg',
  'https://img.pcauto.com.cn/images/ttauto/2021/12/26/7045167622068912654/36d5ad47201a47fa98345cb119ead040.png',
  'https://imagecn.gasgoo.com/moblogo/News/UEditor/image/20220519/6378855250895667817326066.jpg',
  
]
        }
    },
    components:{
        Back 
    },
    methods:{
        goback(){
            // console.log(this.$router);
            this.$router.push('/yxd/sh/GradeIndex/ff')
        }
    },
    mounted(){
      this.list=[
      localStorage.getItem('names'),
      localStorage.getItem('ddtime'),
      localStorage.getItem('img'),
      localStorage.getItem('str'),
      localStorage.getItem('headSculpture'),
    ]
    }
}
</script>

<template>

  <div v-if="list[0]!==null" >
        <div class="text"> <el-avatar :size="50" 
      :src= "list[4]"  />

    <el-text  class="mx-1" size="large">{{ list[0] }}</el-text>
    <el-text class="mx-1" size="large">{{ list[1] }}</el-text>
    <el-text class="mx-1" size="large">{{ list[3] }}</el-text>
  </div>
  <div class="demo-image">
    <div  class="nice">
      <span class="demonstration">{{ list[5]  }}</span>
      <el-image  style="width: 320px; height: 280px" :src="this.list[2]"
        :initial-index="4" :zoom-rate="1.2" />
        
    </div>
  </div></div>




<div style="margin-bottom: 20px;">
    <el-button circle  @click="goback"><el-icon><Back /></el-icon></el-button>
    </div>
     <div class="text"><el-avatar :size="50" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F19%2F20210519212438_ced7e.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681612256&t=3f72528cd862cb729c75ea1222ac1f6c"/>

<el-text class="mx-1" size="large">杨老师</el-text>
<el-text class="mx-1" size="large">2022-01-20 14:00</el-text>
<el-text class="mx-1" size="large">奥迪的班会</el-text></div>
 <div class="demo-image">
<div v-for="fit in fits" :key="fit" class="block">
<!-- <span class="demonstration">{{ fit }}</span> -->
<el-image style="width: 320px; height: 280px" :src="fit" :preview-src-list="fits"  :initial-index="4" :zoom-rate="1.2"/>
</div>
</div>
  
</template>

<style lang="scss" scoped>
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}


.text{
    display: flex;
    .el-text{
      color: black;
      margin-left: 35px;
    }

}
.demo-image .block {
  padding: 30px 10px 10px 20px;
  text-align: center;
  /* border-right: solid 1px var(--el-border-color); */
  display: inline-block;
  width: 30%;
  box-sizing: border-box;
  /* vertical-align: top; */
}
.demo-image .block:last-child {
  border-right: none;
}
/* .demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
} */
</style>